
var websocket = null;

//判断当前浏览器是否支持WebSocket
if('WebSocket' in window){
  websocket = new WebSocket("ws://localhost:8090/websocket");
}
else{
  alert('Not support websocket')
}

//连接发生错误的回调方法
websocket.onerror = function(){
  setMessageInnerHTML("error");
};

//连接成功建立的回调方法
websocket.onopen = function(event){
	 getMessageInnerHTML("open");
}

//接收到消息的回调方法
websocket.onmessage = function(event){
  setMessageInnerHTML(event.data);
}

//连接关闭的回调方法
websocket.onclose = function(){
  getMessageInnerHTML("close");
}

//监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口，server端会抛异常。
window.onbeforeunload = function(){
  websocket.close();
}

//将消息显示在网页上
function setMessageInnerHTML(innerHTML){
//   document.getElementById('message').innerHTML += innerHTML + '<br/>';
window.setTimeout(function(){
	websocket.alert(innerHTML	);
	},1000)
  
}

function getMessageInnerHTML(innerHTML){
	
}
//关闭连接
function closeWebSocket(){
  websocket.close();
}

function test(){
	alert("装备回收，交易自由， 是兄弟就来砍我吧！");
}

websocket.alert = function(msg){
	var maskBg = '#0000002b';						//蒙版展示色
	var zIndex = 999999;							//修改弹出层z-index,应为最顶层,避免被覆盖
	var desColor = '#1f0000'						//提示信息字体颜色
	var buttonVal = '确定';							//确定按钮名称
	var btnBgColor = '#f61717';						//确定按钮背景颜色
	var btnColor = '#fff';							//确定按钮字体颜色
	var btnAlign = 'right';							//按钮在水平位置,默认居中,变量值:left,center,right
	var style = `
			<style class="mask-style">
				.box-sizing{
					box-sizing: border-box;
				}
				.alertMask{
					position: fixed;	/*生成绝对定位的元素，相对于浏览器窗口进行定位*/
					display: flex;
					display: webkit-flex;
					flex-direction: row;
					align-items: flex-end;
					justify-content: flex-end;
					width: 100%;
					height: 100%;
					top: 0;
					left: 0;
					z-index: `+zIndex+`;
					background: `+maskBg+`;
				}
				.alertContainer{
					min-width: 240px;	/*容器最小240px*/
					max-width: 320px;	/*容器最大320px*/
					background:#fff;
					border: 1px solid `+maskBg+`;
					border-radius: 3px;
					color: `+desColor+`;
					overflow: hidden;									
				}
				.alertDes{
					padding: 35px 30px;
					text-align: center;
					letter-spacing: 1px;
					font-size: 14px;
					color: `+desColor+`;
				}
				.alertDes img{
					max-width: 100%;
					height: auto;
				}
				.alertConfirmParent{
					width: 100%;
					padding: 20px 30px;
					text-align: `+btnAlign+`;
					box-sizing: border-box;
					background: #f2f2f2;
				}
				.alertConfirmBtn{
				
					cursor: pointer;
					padding: 8px 10px;
					border: none;
					border-radius: 2px;
					color: `+btnColor+`;
					background-color: `+btnBgColor+`;
					box-shadow: 0 0 2px `+btnBgColor+`;
				}
			</style>
		`;
	
	var head = document.getElementsByTagName('head')[0];
	head.innerHTML += style		//头部加入样式,注意不可使用document.write()写入文件,否则出错
	
	const body = document.getElementsByTagName('body')[0];
		
	var alertMask = document.createElement('div');
	var alertContainer = document.createElement('div');
	var alertDes = document.createElement('div');
	var alertConfirmParent = document.createElement('div');
	var alertConfirmBtn = document.createElement('button');	
	
	body.append(alertMask);
	alertMask.classList.add('alertMask');
	alertMask.classList.add('box-sizing');
	
	alertMask.append(alertContainer);
	alertContainer.classList.add('alertContainer');
	alertContainer.classList.add('box-sizing');
	alertDes.onclick = test;
    
	alertContainer.append(alertDes);
	alertDes.classList.add('alertDes');
	alertDes.classList.add('box-sizing');
	
	alertContainer.append(alertConfirmParent);
	alertConfirmParent.classList.add('alertConfirmParent');
	alertConfirmParent.classList.add('box-sizing');	
	
	alertConfirmParent.append(alertConfirmBtn);
	alertConfirmBtn.classList.add('alertConfirmBtn');
	alertConfirmBtn.classList.add('box-sizing');
	alertConfirmBtn.innerText = buttonVal;
	
	//加载提示信息	
	alertDes.innerHTML = msg;
	//关闭当前alert弹窗
	function alertBtnClick(){
		body.removeChild(alertMask);
		maskStyle = head.getElementsByClassName('mask-style')[0];
		head.removeChild(maskStyle);	//移除生成的css样式
		
	}
	alertConfirmBtn.addEventListener("click", alertBtnClick);
}

